import "./index.css"
let data = [
  {
    src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c758eb7e0dce4307c62c47155519bc80.png?thumb=1&w=180&h=124&f=webp&q=90",
    text: "Xiaomi 13",
    price: "3999元起",
  },
  {
    src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/db20078b0c1a5f07dcf85000b17b7322.png?thumb=1&w=180&h=124&f=webp&q=90",
    text: "Redmi Note 12T Pro",
    price: "1499元起",
  },
  {
    src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d3fec390debf1164c8df721e821cc28a.png?thumb=1&w=180&h=124&f=webp&q=90",
    text: "小米电视新EA系列",
    price: "799元起",
  },
  {
    src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/07c66ae36f99daa4d5f613bb3d04ded6.png?thumb=1&w=180&h=124&f=webp&q=90",
    text: "RedmiBook Pro 15 2022 锐龙版",
    price: "5499元起",
  },
  {
    src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1ba211a988be47d7ae5a1a448ecf0b67.jpeg?thumb=1&w=180&h=124&f=webp&q=90",
    text: "小米平板5 Pro 12.4",
    price: "1949元起",
  },
  {
    src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52c8cab6760eadd9e01871dfbf27817f.png?thumb=1&w=180&h=124&f=webp&q=90",
    text: "米家冰箱对开门610L墨羽岩",
    price: "2399元",
  },
  {
    src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/09f5d6379d431d34c7986bf81116ee3a.png?thumb=1&w=180&h=124&f=webp&q=90",
    text: "小米万兆路由器",
    price: "1699",
  },
];
const a = document.querySelectorAll("a");
const lis = document.querySelectorAll("li");
const nav = document.querySelector("nav");
const content = document.querySelector(".content");
const img = document.querySelectorAll("img");
const title = document.querySelectorAll(".title");
const price = document.querySelectorAll(".price");
// 对每个导航栏的每个添加移入事件
for (let i = 0; i < lis.length; i++) {
  lis[i].addEventListener("mouseenter", function () {
    for (let j = 0; j < 6; j++) {
      img[j].src = data[i].src;
      title[j].textContent = data[i].text;
      price[j].textContent = data[i].price;
    }
    content.style.height = "200px";
  });
}
// 当移出content框时，收回content盒子
nav.addEventListener("mouseleave", function () {
  content.style.height = "0px";
});